<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--
        盒子模型 display

        contennt（文本内容）+padding（内边距）+border（边框）+margin（外边距）

        1.块级模型（div）

        1.文本内容不足以支撑一整行时，也会占据一整行的宽度
        2.完全不能和其他类型的标签共存在一行
        3.设置宽高是有作用的
        4.四个方向的内边距都有效果
        5.`padding：20px 40px` 表示上下为20px，左右为40px
        6.border 边框的粗细、边框的纹理（solid）、颜色（英文单词、十六进制、rgb、rgba）
        7.margin四个方向都有效果
        2.行内元素（span）

          1.文本内容等于标签的占地面积
          2.只要父元素宽度足够时，就能够和其他非块级元素的标签共存在一行
          3.设置宽高是无效的
          4.四个方向的内边距都有效果
          5.padding同上
          6.border同上
          7.margin只有左右有效果，上下是没有效果

        3.行内块级元素
    -->
    <style>
        div {
            width: 400px;
            height:400px;
            padding-top：10px；
            padding-right：20px；
            padding-bottom：30px；
            padding-left：40px；
        }

        span {
            wiidth:200px;
            height:200px;
            padding-top：10px；
            padding-right：20px；
            padding-bottom：30px；
            padding-left：40px；
            border:20px solid green;


        }
    </style>

    <div>我是一个div</div>
    <span>我是一个span</span>
</body>
</html>